<script>
import TreeItem from "./TreeItem.vue";
import MenuItem from "./MenuItem.vue";
import AvatarUploader from "@/components/avatar-uploader/index.vue";
import RoleSelect from "@/components/role-select/index.vue"

export default {
    components: {
        TreeItem,
        MenuItem,
        AvatarUploader,
        RoleSelect,
    },
    data() {
        return {
            treeData: {
                name: "1",
                children: [
                    { name: '1-1' },
                    { name: '1-2' },
                    {
                        name: '1-3',
                        children: [
                            {
                                name: '1-3-1',
                                children: [{ name: '1-3-1-1' }, { name: '1-3-1-2' }]
                            },
                            { name: '1-3-2' },
                            { name: '1-3-3' },
                            {
                                name: '1-3-4',
                                children: [{ name: '1-3-4-1' }, { name: '1-3-4-2' }]
                            },
                        ],
                    },
                ],
            },
            headImg:'',
            roleIdList:[],
        };
    },

    created() {
        console.log(this.$router);
    },
    methods: {
        addRoute() {
            this.$router.addRoute({
                path: "/abcd",
                component: () => import("@/views/dashboard/monitor.vue")
            });

            this.$router.push("/abcd");
        },
        removeRoute() {
            // this.$router.removeRoute('dashboard-monitor'),
            this.$router.push({ name: 'dashboard-monitor' })
        },
        hasRoute() {
            console.log(this.$router.hasRoute('login'));
        }
    }
};
</script>

<template>
    <div>
        <h1>主控台</h1>

        <hr />
        <RoleSelect v-model="roleIdList"/>
        <hr />
        <el-button once @click="addRoute">addRoute</el-button>
        <el-button once @click="removeRoute">removeRoute</el-button>
        <el-button once @click="hasRoute">hasRoute</el-button>
        
        <ul>
            <TreeItem :model="treeData" />
        </ul>
        
        <el-menu>
            <MenuItem :model="treeData" />
        </el-menu>
        <br>
        
        <AvatarUploader v-model="headImg"/>
    </div>
</template>